import React from 'react';
import { Button, Checkbox, Input, Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import type { ImagesListParams, ImagesListItem } from '../data';
import { addImages } from '../service';
import styles from './index.less';

export interface IRightHeaderProps {
  getImages: (params?: ImagesListParams) => void;
  setSearchTitle: (value: string) => void;
  selectedFileItem: ImagesListItem;
}

const { Search } = Input;

/**
 * 右侧标题组件
 */
const RightHeader: React.FC<IRightHeaderProps> = (props) => {
  const { getImages, setSearchTitle, selectedFileItem } = props;

  const uploadParams = {
    name: 'file',
    action: '/api/upload',
    onChange(info: any) {
      if (info.file.status !== 'uploading') {
        console.log({ info });
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功！`);
        addImages({ title: info.file.name, parentId: selectedFileItem?.id || '' }).then(() => {
          getImages({ parentId: selectedFileItem?.id });
        });
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败！`);
      }
    },
  };
  return (
    <div className={styles['right-header']}>
      <div className={styles['right-header-title']}>
        <div>{selectedFileItem?.name || ''}</div>
        <div>
          <Checkbox>全选</Checkbox>
        </div>
      </div>
      <div>
        <Search
          className={styles['right-header-search']}
          placeholder="输入名称进行搜索"
          enterButton
          onSearch={(title) => {
            // 获取所有符合条件的图片数据
            getImages({ title });
            setSearchTitle(title);
          }}
        />
        &ensp;
        <Button type="primary" ghost>
          批量移动
        </Button>
        &ensp;
        <Button type="primary" ghost>
          批量删除
        </Button>
        &ensp;
        <Upload {...uploadParams}>
          <Button type="primary" icon={<UploadOutlined />}>
            本地上传
          </Button>
        </Upload>
      </div>
    </div>
  );
};

export default RightHeader;
